<template>
  <div class="product-detail">
    <div class="container">
      <!-- 左侧图片展示 -->
      <div class="product-gallery">
        <div class="main-image">
          <img src="@/assets/images/23.png" alt="按摩枕">
        </div>
        <div class="thumbnail-list">
          <img src="@/assets/images/23.png" alt="按摩枕" class="active">
          <img src="@/assets/images/23.png" alt="按摩枕">
          <img src="@/assets/images/23.png" alt="按摩枕">
          <img src="@/assets/images/23.png" alt="按摩枕">
        </div>
      </div>

      <!-- 右侧商品信息 -->
      <div class="product-info">
        <div class="tag">发货中</div>
        <h1>摩摩哒智能感应车载按摩头枕腰靠 灰色 单腰靠</h1>
        
        <div class="price-section">
          <span class="label">售价</span>
          <span class="price">¥299</span>
        </div>

        <div class="service-section">
          <div class="service-item">
            <i class="icon">✓</i>
            <span>满69包邮</span>
          </div>
          <div class="service-item">
            <i class="icon">✓</i>
            <span>三方店铺</span>
          </div>
          <div class="service-item">
            <i class="icon">✓</i>
            <span>7天无理由</span>
          </div>
          <div class="service-item">
            <i class="icon">✓</i>
            <span>有品配送</span>
          </div>
        </div>

        <div class="delivery">
          <span>由小米有品提供配送服务，上海有摩有样健康科技有限公司提供售后</span>
          <a href="#">(查看商家资质)</a>
        </div>

        <div class="shipping">
          <span class="label">物流</span>
          <span>预计2025年02月09日前发货</span>
        </div>

        <div class="progress-bar">
          <div class="supporters">801 人支持</div>
          <div class="progress">
            <div class="progress-inner" style="width: 56%"></div>
          </div>
          <div class="target">达成 56%</div>
        </div>

        <div class="options">
          <div class="option-group">
            <div class="label">颜色</div>
            <div class="values">
              <button class="selected">灰色</button>
            </div>
          </div>
          <div class="option-group">
            <div class="label">型号</div>
            <div class="values">
              <button class="selected">单腰靠</button>
              <button>头枕+腰靠套装</button>
            </div>
          </div>
          <div class="option-group">
            <div class="label">方式</div>
            <div class="values">
              <button class="selected">全款支持</button>
            </div>
          </div>
        </div>

        <div class="quantity">
          <span class="label">数量</span>
          <div class="quantity-selector">
            <button>-</button>
            <input type="text" value="1">
            <button>+</button>
          </div>
        </div>

        <div class="actions">
          <button class="primary">立即支持</button>
          <button class="secondary">收藏</button>
          <button class="secondary">咨询</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.product-detail {
  padding: 20px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
}

.product-gallery {
  width: 400px;
}

.main-image {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
}

.thumbnail-list img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}

.thumbnail-list img.active {
  border-color: #ff6700;
}

.product-info {
  flex: 1;
}

.tag {
  display: inline-block;
  background: #ff6700;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.price-section {
  margin: 20px 0;
}

.price {
  color: #ff6700;
  font-size: 28px;
  font-weight: bold;
}

.service-section {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.icon {
  color: #ff6700;
}

.progress-bar {
  margin: 20px 0;
}

.progress {
  height: 4px;
  background: #f5f5f5;
  margin: 10px 0;
}

.progress-inner {
  height: 100%;
  background: #ff6700;
}

.options {
  margin: 20px 0;
}

.option-group {
  margin: 15px 0;
}

.values {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.values button {
  padding: 8px 20px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.values button.selected {
  border-color: #ff6700;
  color: #ff6700;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-selector button {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.quantity-selector input {
  width: 50px;
  height: 30px;
  text-align: center;
  border: 1px solid #ddd;
}

.actions {
  margin-top: 30px;
  display: flex;
  gap: 20px;
}

.actions button {
  padding: 12px 40px;
  border: none;
  cursor: pointer;
}

.primary {
  background: #ff6700;
  color: white;
}

.secondary {
  background: #f5f5f5;
  color: #333;
}
</style> 